import React, { Component } from 'react'
import TextButton from '../../../loginmodule/widgets/TextButton'
import { StyleSheet } from 'react-native'
import { px2dp, LogUtils } from 'rn-xiaobu-utils'
import { appThemeColor, appSubThemeColor } from '../../configs/appconfig'
import { OrderOptionFuncs } from '../../utils/OrderOptionUtils'

type Props = {
  orderIndex: number, // 订单序号
  // op: number, // 页面参数
  orderInfo: Object
}

class OrderOpBtnList extends Component<Props> {

  _getOpText = op => {
    let opObj = {
      touchStyle: styles.baseTouchBtn,
      onPress: () => {
        LogUtils.log('点击了按钮')
      }
    }

    switch (op) {
      case 1:
        opObj.text = '付款'
        opObj.btnStyle = styles.themeBgBtn
        opObj.onPress = OrderOptionFuncs.payOrder
        break
      case 2:
        opObj.text = '取消订单'
        opObj.btnStyle = styles.themeBorderBtn
        opObj.onPress = OrderOptionFuncs.closeOrder
        break
      case 3:
        opObj.text = '确认收货'
        opObj.btnStyle = styles.themeBgBtn
        opObj.onPress = OrderOptionFuncs.receiptOrder
        break
      case 4:
        opObj.text = '评价'
        opObj.btnStyle = styles.subThemeBgBtn
        opObj.onPress = OrderOptionFuncs.commentOrder
        break
      case 5:
        opObj.text = '查看物流'
        opObj.btnStyle = styles.themeColorBtn
        this.onPress = OrderOptionFuncs.searchLogistics
        break
      case 6:
        opObj.text = '退款'
        opObj.btnStyle = styles.themeBorderBtn
        opObj.onPress = OrderOptionFuncs.refundApplicate
        break
      case 7:
        opObj.text = '申请售后'
        opObj.btnStyle = styles.themeBorderBtn
        opObj.onPress = OrderOptionFuncs.afterSaleService
        break
      case 8:
        opObj.text = '退款中'
        opObj.btnStyle = styles.themeBorderBtn
        this.onPress = OrderOptionFuncs.refunding
        break
      case 12:
        // 同意退款和退款失败都去查看退款详情
        opObj.text = '已同意退款'
        opObj.btnStyle = styles.themeBorderBtn
        opObj.onPress = OrderOptionFuncs.refunding
        break
      case 13:
        opObj.text = '退款失败'
        opObj.btnStyle = styles.themeBorderBtn
        opObj.onPress = OrderOptionFuncs.refunding
        break
      case 14:
        opObj.text = '查看票码'
        opObj.btnStyle = styles.themeBorderBtn
        opObj.onPress = OrderOptionFuncs.checkTickets
        break
      case 15:
        opObj.text = '删除订单'
        opObj.btnStyle = styles.blackColorBtn
        opObj.onPress = OrderOptionFuncs.removeOrder
        break
      case 16:
        opObj.text = '试客评价'
        opObj.btnStyle = styles.subThemeBgBtn
        opObj.onPress = OrderOptionFuncs.commentDailyTrial
        break
    }
    opObj.btnStyle = { ...styles.baseBtn, ...opObj.btnStyle }
    return opObj
  }

  _getOpBtnItem = (op, index) => {
    let { text, btnStyle, touchStyle, onPress } = this._getOpText(op)
    return (
      <TextButton
        key={'opBtn_' + index}
        text={text}
        style={btnStyle}
        touchStyle={touchStyle}
        onPress={() => onPress(this.props.orderInfo, this.props.orderIndex)}/>
    )
  }

  render () {
    return this.props.orderInfo.OP.map((item, index) => {
      return this._getOpBtnItem(item, index)
    })
  }
}

const styles = StyleSheet.create({
  baseTouchBtn: {
    minWidth: px2dp(140),
    height: px2dp(50),
    fontSize: px2dp(28),
    marginLeft: px2dp(30),
    borderRadius: px2dp(8)
  },
  baseBtn: {
    width: '100%',
    height: '100%',
    lineHeight: px2dp(50),
    textAlign: 'center',
    borderRadius: px2dp(8)
  },
  themeBgBtn: {
    backgroundColor: appThemeColor,
    color: '#ffffff'
  },
  themeBorderBtn: {
    backgroundColor: '#ffffff',
    color: appThemeColor,
    borderColor: appThemeColor,
    borderStyle: 'solid',
    borderWidth: px2dp(1)
  },
  themeColorBtn: {
    backgroundColor: '#ffffff',
    color: appThemeColor
  },
  blackColorBtn: {
    backgroundColor: '#ffffff',
    color: '#333333',
    borderColor: '#cccccc',
    borderStyle: 'solid',
    borderWidth: px2dp(1)
  },
  subThemeBgBtn: {
    backgroundColor: appSubThemeColor,
    color: '#ffffff'
  }
})

// export default connect(
//   (state) => ({
//     dataList: state.order2Reducer.dataList
//   }),
//   (dispatch) => ({
//     dispatch: dispatch
//   })
// )(OrderOpBtnList)
export default OrderOpBtnList
